<template>
  <div class="contact-container">
    <h1>联系我们</h1>
    <p>有任何问题或建议？请随时与我们联系</p>
    
    <div class="contact-content">
      <div class="contact-info">
        <div class="info-item">
          <div class="info-icon">📍</div>
          <div class="info-text">
            <h3>公司地址</h3>
            <p>北京市朝阳区建国路88号</p>
          </div>
        </div>
        
        <div class="info-item">
          <div class="info-icon">📞</div>
          <div class="info-text">
            <h3>联系电话</h3>
            <p>400-123-4567</p>
          </div>
        </div>
        
        <div class="info-item">
          <div class="info-icon">✉️</div>
          <div class="info-text">
            <h3>电子邮箱</h3>
            <p>support@taskmanager.com</p>
          </div>
        </div>
        
        <div class="info-item">
          <div class="info-icon">⏰</div>
          <div class="info-text">
            <h3>工作时间</h3>
            <p>周一至周五 9:00-18:00</p>
          </div>
        </div>
      </div>
      
      <div class="contact-form">
        <h2>发送消息</h2>
        <form @submit.prevent="submitForm">
          <div class="form-group">
            <label for="name">您的姓名</label>
            <input 
              type="text" 
              id="name" 
              v-model="formData.name" 
              required 
              placeholder="请输入您的姓名"
            >
          </div>
          
          <div class="form-group">
            <label for="email">电子邮箱</label>
            <input 
              type="email" 
              id="email" 
              v-model="formData.email" 
              required 
              placeholder="请输入您的电子邮箱"
            >
          </div>
          
          <div class="form-group">
            <label for="subject">主题</label>
            <select id="subject" v-model="formData.subject" required>
              <option value="">请选择主题</option>
              <option value="feedback">产品反馈</option>
              <option value="support">技术支持</option>
              <option value="partnership">商务合作</option>
              <option value="other">其他问题</option>
            </select>
          </div>
          
          <div class="form-group">
            <label for="message">您的消息</label>
            <textarea 
              id="message" 
              v-model="formData.message" 
              required 
              rows="5" 
              placeholder="请输入您的消息内容"
            ></textarea>
          </div>
          
          <div class="form-group form-checkbox">
            <input type="checkbox" id="subscribe" v-model="formData.subscribe">
            <label for="subscribe">订阅我们的产品更新和优惠信息</label>
          </div>
          
          <button type="submit" class="submit-btn" :disabled="isSubmitting">
            {{ isSubmitting ? '发送中...' : '发送消息' }}
          </button>
        </form>
        
        <div v-if="submitSuccess" class="success-message">
          <p>🎉 感谢您的留言！我们会尽快回复您。</p>
        </div>
      </div>
    </div>
    
    <div class="map-section">
      <h2>我们的位置</h2>
      <div class="map-container">
        <!-- 这里使用一个占位图，实际项目中应该集成真实的地图API -->
        <img src="https://picsum.photos/id/1019/1200/400" alt="公司位置地图" class="map-image">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ContactPage',
  data() {
    return {
      formData: {
        name: '',
        email: '',
        subject: '',
        message: '',
        subscribe: false
      },
      isSubmitting: false,
      submitSuccess: false
    }
  },
  methods: {
    submitForm() {
      this.isSubmitting = true
      
      // 模拟表单提交
      setTimeout(() => {
        console.log('表单数据:', this.formData)
        this.isSubmitting = false
        this.submitSuccess = true
        
        // 重置表单
        this.formData = {
          name: '',
          email: '',
          subject: '',
          message: '',
          subscribe: false
        }
        
        // 5秒后隐藏成功消息
        setTimeout(() => {
          this.submitSuccess = false
        }, 5000)
      }, 1500)
    }
  }
}
</script>

<style scoped>
.contact-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.contact-container h1 {
  font-size: 2.2rem;
  text-align: center;
  margin-bottom: 0.5rem;
  color: #333;
}

.contact-container p {
  text-align: center;
  color: #666;
  margin-bottom: 2rem;
}

.contact-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}

@media (max-width: 768px) {
  .contact-content {
    grid-template-columns: 1fr;
  }
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.info-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background-color: #f8f9fa;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.info-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.info-icon {
  font-size: 1.8rem;
  min-width: 40px;
}

.info-text h3 {
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
  color: #333;
}

.info-text p {
  font-size: 0.95rem;
  color: #666;
  margin: 0;
  text-align: left;
}

.contact-form {
  background-color: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.contact-form h2 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  color: #333;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #333;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #42b983;
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.form-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-checkbox input {
  width: auto;
}

.submit-btn {
  width: 100%;
  padding: 0.75rem;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.submit-btn:hover:not(:disabled) {
  background-color: #35495e;
}

.submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.success-message {
  margin-top: 1rem;
  padding: 1rem;
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
  border-radius: 4px;
  text-align: center;
}

.map-section {
  text-align: center;
  margin-top: 3rem;
}

.map-section h2 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  color: #333;
}

.map-container {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.map-image {
  width: 100%;
  height: auto;
  display: block;
}
</style>